<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="common/head :: header(~{::title},~{::link},~{::style})">

    </head>
    <body>

        <div id="content" class="content">
            <div class="row">
                <div class="col-sm-12">
                    <div class="well">
                        <fieldset>
                            <legend>
                            </legend>
                            <button id="btn-add" class="btn btn-primary btn-sm">新增资源</button>
                        </fieldset>

                        <table class="table table-striped table-bordered zy-table-ellipsis" id="treetable">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>资源名称</th>
                                    <th>类型</th>
                                    <th>图标</th>
                                    <th>权限标识</th>
                                    <th>链接地址</th>
                                    <th>排序</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>


                    </div>
                </div>
            </div>

        </div>


        <div th:replace="common/htmlJS::common_js(~{::script})">
        <script th:src="@{/assets/js/dataTables.treeGrid.js}"></script>
        <script th:inline="javascript">
                var dataTable;
                $(function () {
                    /**
                     l - Length changing 改变每页显示多少条数据的控件
                     f - Filtering input 即时搜索框控件
                     t - The Table 表格本身
                     i - Information 表格相关信息控件
                     p - Pagination 分页控件
                     r - pRocessing 加载等待显示信息
                     **/
                    dataTable = $('#treetable').DataTable({
                        "dom": "tr",
                        "ordering": false, //禁用排序
                        "processing": true,
                        "serverSide": true,
                        "autoWidth": false,
                        "ajax": {
                            "url": basePath+"/system/menu/list/tree",
                        },
                        'treeGrid': {
                            'left': 15,
                            'expandAll' : false, //是否默认展开 true 是
                            'expandIcon': '<span><i class="fa fa-plus-square"></i></span>',
                            'collapseIcon': '<span><i class="fa fa-minus-square"></i></span>'
                        },
                        "columns": [
                            {
                                className: 'treegrid-control',
                                'width':'30',
                                data: function (item) {
                                    if (item.children != null && item.children.length > 0) {
                                        return '<span><i class="fa fa-plus-square"></i></span>';
                                    }
                                    return '';
                                }
                            },
                            {"data": "title", "width":"150"},
                            {"width":"70",data: function (item) {
                                    if(item.type==1){
                                        return '<span class="label bg-color-blueLight txt-color-white">菜单</span>';
                                    }else if(item.type==2){
                                        return '<span class="label bg-color-redLight txt-color-white">页面列表</span>';
                                    }else if(item.type==3){
                                        return '<span class="label bg-color-blue txt-color-white">页面按钮</span>';
                                    }else if(item.type==4){
                                        return '<span class="label bg-color-green txt-color-white">表格按钮</span>';
                                    }else if(item.type==5){
                                        return '<span class="label bg-color-blue txt-color-white">其他资源</span>';
                                    }
                                }},
                            {"width":"30",data: function (item) {
                                    return '<i class="'+item.icon+'" ></i>';
                                }}
                            ,
                            {"data": "perms","width":"200"},
                            {"data": "url","width":"200"},
                            {"data": "sort","width":"30"},
                            {"width":"150",data: function (item) {
                                    if(item.type==1 || item.type==2){
                                        return '<button class="btn btn-primary btn-xs" onclick="add(\'' + item.id + '\')">新增</button>'
                                            +' <button class="btn btn-success btn-xs" onclick="edit(\'' + item.id + '\')">编辑</button>'
                                            +' <button class="btn btn-danger btn-xs" onclick="del(\'' + item.id + '\')">删除</button>';
                                    }else{
                                        return '<button class="btn btn-success btn-xs" onclick="edit(\'' + item.id + '\')">编辑</button>'
                                            +' <button class="btn btn-danger btn-xs" onclick="del(\'' + item.id + '\')">删除</button>';
                                    }
                                }}
                        ],
                        "columnDefs": [
                            {
                                "defaultContent": "",
                                "targets": "_all"
                            }
                        ]
                    });
                    $('#treetable').parent().attr('style','overflow-x: auto');

                    $("#btn-add").click("click", function () {
                        add('0');
                    });

                });

                function add(id) {
                    zy.openPage('新增资源','/system/menu/add/page?id='+id);
                }

                function edit(id) {
                    zy.openPage('编辑资源','/system/menu/edit/page?id='+id);
                }

                function del(id) {
                    layer.confirm('确定要删除吗', {
                        icon : 3
                    }, function() {
                        zy.ajax({
                            url : basePath+'/system/menu/status/delete',
                            data : {ids:id},
                            success : function(result) {
                                if (result.code==200) {
                                    layer.msg('删除成功');
                                    window.location.reload();
                                }else{
                                    layer.msg(result.msg, {icon: 2,shift: 6});
                                }
                            }
                        });


                    });
                }

        </script>
        </div>
    </body>
</html>